<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 边框表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container" id="root">
        <table class="table table-bordered">
            <caption>
                <input placeholder="输入要添加的项目" v-model="todo" type="text" @keydown.enter="add()">
            </caption>
            <thead>
                <tr>
                    <th>未完成状态</th>
                    <th>项目</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="(item,index) in donelist" :key="item.id + 1">
                    <td>
                        <input type="checkbox" :checked="item.selectOne" @click="select(index)">
                    </td>
                    <td>{{item.name}}</td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </tbody>
            <thead>
                <tr>
                    <th>完成状态</th>
                    <th>项目</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in finishlist" :key="item.id">
                    <td>
                        <input type="checkbox" :checked="item.selectOne" @click="selectfinish(index)">
                    </td>
                    <td>{{item.name}}</td>
                    <td>
                        <button @click="dele(index)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
                todo: '',
                donelist: [
                    { id: 1, name: '睡觉', selectOne: false },
                    { id: 2, name: 'dp', selectOne: false },
                    { id: 3, name: '吃饭', selectOne: false },
                ],
                finishlist: [
                    { id: 1, name: '搜索', selectOne: true },
                    { id: 2, name: '搜索', selectOne: true }
                ]
            }
        },
        methods: {
            select(index) {
                this.donelist[index].selectOne=!this.donelist[index].selectOne
                this.donelist.filter(item=>{
                    if(item.selectOne){
                        this.finishlist.push({
                            id:new Date().getTime(),
                            name:item.name,
                            selectOne:item.selectOne
                        })
                    }
                })
                this.donelist.splice(index, 1)
                localStorage.setItem("todolist2", JSON.stringify(this.finishlist))
                localStorage.setItem("todolist", JSON.stringify(this.donelist))
            },
            selectfinish(index){
                this.finishlist[index].selectOne=!this.finishlist[index].selectOne
                this.finishlist.filter(item=>{
                    if(!item.selectOne){
                        this.donelist.push({
                            id:new Date().getTime(),
                            name:item.name,
                            selectOne:item.selectOne
                        })
                    }
                })
                this.finishlist.splice(index, 1)
                localStorage.setItem("todolist", JSON.stringify(this.donelist))
                localStorage.setItem("todolist2", JSON.stringify(this.finishlist))
            },
            del(index){
                this.donelist.splice(index, 1)
                localStorage.setItem("todolist", JSON.stringify(this.donelist))
            },
            dele(index){
                this.finishlist.splice(index, 1)
                localStorage.setItem("todolist2", JSON.stringify(this.finishlist))
            },
            add() {
                console.log(this.donelist);
                if (this.todo == '') return
                this.donelist.push({
                    id:new Date().getTime(),
                    name: this.todo,
                    selectOne: false
                })
                this.todo = ''
                localStorage.setItem("todolist", JSON.stringify(this.donelist))
            },
        },
        mounted() {
            var todolist= JSON.parse(localStorage.getItem("todolist"))
            var todolist2= JSON.parse(localStorage.getItem("todolist2"))
            this.donelist=todolist
            this.finishlist=todolist2
        }
    })
</script>

</html>